<script setup>
import { reactive, ref } from "vue";
// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const onSubmit = () => {
  console.log("submit!");
};
// 文件上传
const previewImage = ref(null);
const previewFile = ref(null);

const onFileChange = (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    previewImage.value = e.target.result;
  };
  reader.readAsDataURL(file);

  previewFile.value = URL.createObjectURL(file);
};
const ba = ref(null);
const bc = ref(null);
const b = (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    ba.value = e.target.result;
  };
  reader.readAsDataURL(file);

  bc.value = URL.createObjectURL(file);
};
// 上传
const file = ref(null);

const c = (e) => {
  file.value = e.target.files[0];
};

const sc = async () => {
  if (!file.value) {
    alert("请选择一个文件");
    return;
  }

  const formData = new FormData();
  formData.append("file", file.value);

  const response = await fetch("/api/upload", {
    method: "POST",
    body: formData,
  });

  if (response.ok) {
    alert("文件上传成功");
  } else {
    alert("文件上传失败");
  }
};
// 图片上传
const image = ref(null);
const imageUrl = ref("");

const a = (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    imageUrl.value = e.target.result;
  };
  reader.readAsDataURL(file);
};

const uploadImage = async () => {
  if (!file.value) {
    alert("请选择一个图片");
    return;
  }

  const formData = new FormData();
  formData.append("file", file.value);

  const response = await fetch("/api/upload", {
    method: "POST",
    body: formData,
  });

  if (response.ok) {
    alert("图片上传成功");
  } else {
    alert("图片上传失败");
  }
  // 上传图片的逻辑
};
</script>

<template>
  <div class="artic">
    <div
      style="
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 600;
      "
    >
      业务申请
    </div>
    <div>
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <!-- 业务类型 -->
        <el-form-item>
          <el-select v-model="form.region" placeholder="业务类型">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <!-- 业务标题 -->
        <el-form-item>
          <el-input v-model="form.name" placeholder="业务标题" />
        </el-form-item>
        <!-- 业务内容 -->
        <el-form-item>
          <el-input
            v-model="form.desc"
            type="textarea"
            placeholder="业务内容"
          />
        </el-form-item>
        <!-- 图片上传 -->
        <div style="margin-bottom: 20px">
          <div>
            <input type="file" @change="a" />
            <button @click="uploadImage">上传图片</button>
          </div>

          <img
            v-if="imageUrl"
            :src="imageUrl"
            alt="上传的图片"
            style="width: 230px; height: 180px"
          />
        </div>
        <!-- 文件上传 -->
        <div style="height: 60px">
          <input type="file" @change="onFileChange" />
          <img v-if="previewImage" :src="previewImage" alt="Preview" />
          <a v-if="previewFile" :href="previewFile" download>下载</a>
          <button @click="sc">上传文件</button>
        </div>
        <div style="margin-bottom: 10px">
          <input type="file" @change="b" />
          <img v-if="ba" :src="ba" alt="Preview" />
          <a v-if="bc" :href="bc" download>下载</a>
          <button @click="sc">上传文件</button>
        </div>
        <!-- 选择审批人 -->
        <el-form-item>
          <el-radio-group v-model="form.resource">
            <el-radio value="Sponsor">张三</el-radio>
            <el-radio value="Venue">李四</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="large" round
            >提交</el-button
          >
          <el-button size="large" round>提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.artic {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  .el-button:nth-child(1) {
    width: 300px;
  }
  .el-button:nth-child(2) {
    width: 100px;
  }
}
</style>
